import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

import 'filter_page.dart';

class ShaderMaskPage extends PageWithTitle {
  const ShaderMaskPage({super.key}) : super("着色器遮罩(ShaderMask)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("着色器遮罩，用于包裹子组件，通过遮罩层与子组件绘制内容叠加，实现内容颜色修改"),
      AppSpacer.large,
      LabelText("官方示例，火焰文本："),
      _Example(),
      AppSpacer.large,
      LabelText("骨架屏："),
      Skeleton(),
      AppSpacer.large,
      UlItem("ShaderMask"),
      LabelText("- shaderCallback 当需要绘制遮罩层时通过此回调来创建一个shader，通常可以"
          "通过图片或者渐变对象来创建，该方法接收绘制区域"),
      LabelText("- blendMode 混合模式，默认是modulate内容颜色与遮罩颜色的各分量相乘得到最"
          "终颜色，通常内容颜色使用白色最终混合出来就会是遮罩层的颜色，用黑色则混合出黑色（各分"
          "量为0）"),
      LabelText("- child 需要修改颜色的子组件，我们一般直接用白色绘制内容，若内容有图片或者"
          "各种颜色都有，可以修改blendMode来直接取重叠部位的遮罩颜色，或者先用"
          "BackdropFilter对内容进行处理。"),
      PageLink(FilterPage()),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      shaderCallback: (Rect bounds) {
        return RadialGradient(
          center: Alignment.topLeft,
          radius: 1.0,
          colors: [Colors.yellow, Colors.deepOrange.shade900],
          tileMode: TileMode.mirror,
        ).createShader(bounds);
      },
      child: const Text(
        "I'm burning the memories",
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}

class Skeleton extends StatefulWidget {
  const Skeleton({super.key});

  @override
  State<StatefulWidget> createState() {
    return _SkeletonState();
  }
}

class _SkeletonState extends State<Skeleton>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animationController =
      AnimationController(vsync: this);
  int _times = 0;

  @override
  void initState() {
    super.initState();
    _times = 0;
    _animationController
      ..duration = const Duration(milliseconds: 1000)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _times++;
          if (_times < 5) {
            _animationController.forward(from: 0);
          } else {
            setState(() {});
          }
        }
      });
    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (!_animationController.isCompleted) {
      return AnimatedBuilder(
          animation: _animationController,
          child: _buildContent(
              textStyle: const TextStyle(
                  color: Colors.white, backgroundColor: Colors.white)),
          builder: (context, child) {
            return ShaderMask(
              shaderCallback: (Rect bounds) {
                return const LinearGradient(
                  colors: [
                    Colors.grey,
                    Colors.white,
                    Colors.grey,
                  ],
                  tileMode: TileMode.mirror,
                ).createShader(bounds.translate(
                    bounds.width * _animationController.value, 0));
              },
              child: child,
            );
          });
    } else {
      return _buildContent();
    }
  }

  Widget _buildContent({TextStyle? textStyle}) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          "deal XXX: ",
          style: textStyle,
        ),
        AppSpacer.mini,
        Text(
          "................................................................"
          "................................................................."
          ".................................................................",
          style: textStyle,
        ),
        AppSpacer.mini,
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Text(
              "from XXX",
              style: textStyle,
            ),
          ],
        ),
        AppSpacer.mini,
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Text(
              "2025.7.31",
              style: textStyle,
            ),
          ],
        ),
      ],
    );
  }
}
